<template>
  <div>
    <!-- 设置标题 -->
    <Title title="设备状态分布"></Title>
    <!-- 1.提供图表容器 -->
    <div ref="left2" style="height: 150px; margin-top: 15px"></div>
  </div>
</template>

<script>
//引入饼状图
import { Pie } from "@antv/g2plot";
//引入get请求
import { get } from "@/utils/request";

export default {
  data() {
    return {
      devArr: [],
    };
  },
  async mounted() {
    await this.initLeft2();
    await this.getDevData();
  },
  methods: {
    //创建图表
    initLeft2() {
      const piePlot = new Pie(this.$refs.left2, {
        appendPadding: 10,
        data: this.devArr,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        label: {
          type: "outer",
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    },
    //获取设备状态数据
    async getDevData() {
      let devData = await get("/count/countAll");
      //console.log(devData.data);
      this.devArr = devData.data;
    },
  },
};
</script>

<style lang="scss" scoped></style>
